<script setup lang="ts">
import type { SellRecordApi } from '@/apis'
import { useForm } from '@/hooks'

const emits = defineEmits(['search'])

const { form } = useForm<SellRecordApi.SellRecordQuery>({
  term: undefined,
  campusId: undefined,
  subject: undefined,
  classYear: undefined,
  grade: undefined,
  startDate: undefined,
  endDate: undefined,
  sellerId: undefined,
  valid: true,
})

const onSearch = async () => {
  emits('search', form)
}
</script>

<template>
  <a-space direction="vertical" size="small">
    <a-space wrap>
      <label class="label">记录筛选</label>
      <EmployeeSelect v-model="form.sellerId" type="SELLER" placeholder="选择销售顾问" class="!min-w-200px" multiple />
      <RangePicker v-model:from="form.startDate" v-model:to="form.endDate" :time="false" />
      <a-button type="primary" @click="onSearch">
        搜索
      </a-button>
    </a-space>
    <a-space wrap>
      <label class="label">班级筛选</label>
      <YearTermCascader v-model:class-year="form.classYear" v-model:term="form.term" class="min-w-120px" check-strictly />
      <DictSelect v-model="form.grade" type="select" code="Grade" placeholder="年级" class="min-w-120px!" multiple />
      <DictSelect v-model="form.subject" type="select" code="Subject" placeholder="科目" class="min-w-120px!" />
      <ClassTypeSelect v-model="form.classTypeId" placeholder="班型" class="!min-w-120px" />
    </a-space>
    <a-space wrap>
      <label class="label">其他条件</label>
      <DictSelect v-model="form.classCategory" type="button" code="ClassCategoryEnum" placeholder="类型" />
      <ClassroomCascader v-model:campus-id="form.campusId" v-model:classroom-id="form.classroomId" class="min-w-150px!" check-strictly />
    </a-space>
  </a-space>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
}
</style>
